<template>
	<view class="container">
		<view class="header">
			<view class="mid">
				<view class="mid-item up">
					<view class="sub-left">
						<text class="text">今日线索</text>
						<text class="title">{{todayClueNum}}</text>
					</view>
					<view class="sub-right">
						<text class="text">未跟进量</text>
						<text class="title">{{noFollowNum}}</text>
					</view>
				</view>
				<view class="mid-item down">
					<view class="sub-left">
						<text class="text">今日待办</text>
						<text class="title">{{todayToDoNum}}</text>
					</view>
					<view class="sub-right">
						<text class="text">未处理量</text>
						<text class="title">{{noDealNum}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="main-title">
				<view class="left">待跟进线索</view>
				<view class="right">更多》</view>
			</view>

			<view class="top-container">

				<view class="top-item">
					<view class="title">
						<view class="left">后与胡 <text>男</text></view>
						<view class="right">
							<view class="icon iconfont iconbianji"></view>
						</view>
					</view>

					<view class="top-inner">
						<view class="inner-left">
							<view class="top-item-text">品牌：奔驰GLK300</view>
							<view class="top-item-text">保险到期时间：2020-01-01</view>
							<view class="top-item-text">车辆初登时间：2020-01-01</view>
							<view class="top-item-text">线索分配时间：2020-01-01 18:56</view>
						</view>
						<view class="inner-right">
							<view class="inner-right-text">未知</view>
							<view class="inner-right-text status">待跟进</view>
						</view>
					</view>

					<view class="top-footer">
						<view class="footer-item">
							<text class="icon iconfont icondianhua"></text>
							<text class="icon-text">外呼</text>
						</view>
						<view class="footer-item">
							<text class="icon iconfont iconsettingsfill"></text>
							<text class="icon-text">设置</text>
						</view>
					</view>
				</view>

				<view class="top-item">
					<view class="title">
						<view class="left">后与胡 <text>男</text></view>
						<view class="right">
							<view class="icon iconfont iconbianji"></view>
						</view>
					</view>

					<view class="top-inner">
						<view class="inner-left">
							<view class="top-item-text">品牌：奔驰GLK300</view>
							<view class="top-item-text">保险到期时间：2020-01-01</view>
							<view class="top-item-text">车辆初登时间：2020-01-01</view>
							<view class="top-item-text">线索分配时间：2020-01-01 18:56</view>
						</view>
						<view class="inner-right">
							<view class="inner-right-text">未知</view>
							<view class="inner-right-text status">待跟进</view>
						</view>
					</view>

					<view class="top-footer">
						<view class="footer-item">
							<text class="icon iconfont icondianhua"></text>
							<text class="icon-text">外呼</text>
						</view>
						<view class="footer-item">
							<text class="icon iconfont iconsettingsfill"></text>
							<text class="icon-text">设置</text>
						</view>
					</view>
				</view>

				<view class="top-item">
					<view class="title">
						<view class="left">后与胡 <text>男</text></view>
						<view class="right">
							<view class="icon iconfont iconbianji"></view>
						</view>
					</view>

					<view class="top-inner">
						<view class="inner-left">
							<view class="top-item-text">品牌：奔驰GLK300</view>
							<view class="top-item-text">保险到期时间：2020-01-01</view>
							<view class="top-item-text">车辆初登时间：2020-01-01</view>
							<view class="top-item-text">线索分配时间：2020-01-01 18:56</view>
						</view>
						<view class="inner-right">
							<view class="inner-right-text">未知</view>
							<view class="inner-right-text status">待跟进</view>
						</view>
					</view>

					<view class="top-footer">
						<view class="footer-item">
							<text class="icon iconfont icondianhua"></text>
							<text class="icon-text">外呼</text>
						</view>
						<view class="footer-item">
							<text class="icon iconfont iconsettingsfill"></text>
							<text class="icon-text">设置</text>
						</view>
					</view>
				</view>



			</view>


			<view class="main-title">
				<view class="left">今日代办</view>
				<view class="right">更多》</view>
			</view>



			<view class="down-container">
				<view class="down-item">
					<view class="title">
						<view class="left">后与胡 <text>男</text><text>13:00</text></view>
						<view class="right">
							<view class="icon iconfont iconunfold"></view>
						</view>
					</view>

					<view class="down-detail">
						<view class="down-inner">
							<view class="inner-left">
								<view class="down-item-text">品牌：奔驰GLK300</view>
								<view class="down-item-text">保险到期时间：2020-01-01</view>
								<view class="down-item-text">车辆初登时间：2020-01-01</view>
								<view class="down-item-text">线索分配时间：2020-01-01 18:56</view>
							</view>
							<view class="inner-right">
								<view class="inner-right-text">未知</view>
								<view class="inner-right-text status">待跟进</view>
							</view>
						</view>

						<view class="down-footer">
							<view class="footer-item">
								<text class="icon iconfont icondianhua"></text>
								<text class="icon-text">外呼</text>
							</view>
							<view class="footer-item">
								<text class="icon iconfont iconsettingsfill"></text>
								<text class="icon-text">设置</text>
							</view>
						</view>

					</view>


				</view>

			</view>


		</view>

	</view>
</template>

<script>
	import {
		toToStatistic,
		clueStatistic,
		clubList
	} from '../../utils/api.js';
	export default {
		data() {
			return {
				todayClueNum: 200, //今日线索数量
				noFollowNum: 100, //未跟进量
				todayToDoNum: 123, //今日待办
				noDealNum: 34, //未处理量
				cluePageIndex:1, //线索页码
				cluepageSize:3,  //线索数据条数
				toDoPageIndex:1, //待办页码
				toDopageSize:3,  //待办数据条数
			}
		},
		onLoad() {

		},
		onShow() {
			console.log('页面出现了');
			//获取线索统计
			// this.getClueStatistic();
			// //获取待办统计
			// this.getToToStatistic();
			
			this.getClubList();
		},
		methods: {
			//获取待办统计
			getToToStatistic() {
				console.log('页面出现了1');
				let userId = this.$store.state.user.userId||2;
				console.log(userId);
				toToStatistic(userId).then(function(res){
					console.log(userId);
					let rdata = res.data;
					if (rdata.status == 0) {
						this.todayToDoNum = rdata.data.Total;
						this.noDealNum = rdata.data.UnRead;
					}
				}).catch(function(err) {

				})
			},
			//获取线索统计
			getClueStatistic() {
				console.log('页面出现了2');
				let userId = this.$store.state.user.userId||2;
				clueStatistic(userId).then(function(res){
					let rdata = res.data;
					if (rdata.status == 0) {
						this.todayClueNum = rdata.data.Total;
						this.noFollowNum = rdata.data.UnRead;
					}
				}).catch(function(err) {

				})
			},
			//获取线索列表
			getClubList(){
				// let userId = ;
				console.log('12');
				let data={
					 BeginDate: "",
					 EndDate: "",
					 UserID: 2,
					 FlowStep: 0,
					 PurchaseStep: 0,
					 BrandID: 0,
					 ModelID: 0,
					 PageSize:this.cluepageSize,
					 PageIndex:this.cluePageIndex
				};
				clubList(data).then(function(res){
					console.log(res);
					let rdata=res.data;
					if(rdata.status==0&&rdata.data){
						
					}
				}).catch(function(err){
					
				})
			}
		}
	}
</script>

<style>
	.header {
		box-sizing: border-box;
		width: 100%;
		background-color: #3c67c2;
		padding: 80upx 30upx 50upx 30upx;
	}

	.header .mid {}

	.header .mid .mid-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #def1f9;
		border-radius: 14upx;
		padding: 10upx 8upx;
		margin-bottom: 20upx;
	}

	.header .mid .mid-item .sub-left {
		flex: 1;
		background-color: #3c67c2;
		padding: 6upx 4upx;
		border-radius: 8upx;
		text-align: center;
		color: #fff;
	}

	.header .mid .mid-item .sub-right {
		flex: 1;
		color: #3c67c2;
		text-align: center;
	}

	.header .mid .mid-item .title {
		font-size: 32upx;
	}

	.header .mid .mid-item .text {
		font-size: 28upx;
		margin-right: 10upx;
	}

	.main {
		margin-top: -20upx;
		border-radius: 16upx 16upx 0 0;
		background-color: rgba(216, 216, 216, .3);
		overflow: hidden;
	}

	.main .main-title {
		box-sizing: border-box;
		width: 100%;
		padding: 0 30upx;
		height: 70upx;
		line-height: 70upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f1f1f1;
		background-color: #fff;
	}

	.main .main-title .left {
		flex: 8;
		position: relative;
		font-size: 32upx;
		color: #333;
		padding-left: 20upx;
	}

	.main .main-title .left:before {
		position: absolute;
		left: 0;
		top: 22upx;
		content: '';
		width: 4upx;
		height: 30upx;
		background-color: #3c67c2;
	}

	.main .main-title .right {
		flex: 2;
		font-size: 28upx;
		color: #666;
		text-align: right;
	}

	.main .top-item {
		box-sizing: border-box;
		width: 100%;
		padding: 0 30upx;
		background-color: #fff;
		margin-bottom: 20upx;
		border-bottom: 1px solid #f1f1f1;
	}

	.main .top-item:last-child {
		margin-bottom: 0;
	}

	.main .top-item .title {
		box-sizing: border-box;
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-items: center;
	}

	.main .top-item .title .left {
		flex: 9;
		font-size: 30upx;
		color: #000;
	}

	.main .top-item .title .left text {
		margin-left: 40upx;
	}

	.main .top-item .title .right {
		flex: 1;
		text-align: right;
	}

	.main .top-item .title .right .icon {
		font-size: 40upx;
		color: #3c67c2;
	}

	.main .top-item .top-inner {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10upx 0 20upx 0;
	}

	.main .top-item .top-inner .inner-left {
		flex: 8;
	}

	.main .top-item .top-inner .inner-right {
		flex: 2;
	}

	.main .top-item .top-inner .inner-left .top-item-text {
		font-size: 28upx;
		color: #999;
		line-height: 1.5;
	}

	.main .top-item .top-inner .inner-right .inner-right-text {
		font-size: 32upx;
		color: #999;
		margin-bottom: 10upx;
	}

	.main .top-item .top-inner .inner-right .inner-right-text.status {
		color: #f59a23;
	}

	.main .top-item .top-footer {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
		border-top: 1px solid #f1f1f1;
	}

	.main .top-item .top-footer .footer-item {
		flex: 1;
		position: relative;
		text-align: center;
	}

	.main .top-item .top-footer .footer-item:after {
		position: absolute;
		top: 18upx;
		right: 0;
		content: '';
		width: 2upx;
		height: 50upx;
		background-color: #f1f1f1;
	}

	.main .top-item .top-footer .footer-item:last-child:after {
		display: none;
	}

	.main .top-item .top-footer .footer-item .icon {
		font-size: 40upx;
		color: #3c67c2;
		margin-right: 14upx;
		vertical-align: middle;
	}

	.main .top-item .top-footer .footer-item .icon-text {
		font-size: 32upx;
		color: #666;
		vertical-align: middle;
	}

	.main .down-item {
		box-sizing: border-box;
		width: 100%;

		background-color: #fff;
		margin-bottom: 20upx;
		border-bottom: 1px solid #f1f1f1;
	}

	.main .down-item .title {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		border-bottom: 1px solid #f1f1f1;
	}

	.main .down-item .title .left {
		flex: 9;
		font-size: 30upx;
		color: #000;
	}

	.main .down-item .title .left text {
		margin-left: 40upx;
	}

	.main .down-item .title .right {
		flex: 1;
		text-align: right;
	}

	.main .down-item .title .right .icon {
		font-size: 34upx;
		color: #666;
	}
</style>
